<template>
  <el-button type="primary" plain @click="dialogFormVisible=true">添加课程</el-button>
  <el-table :data="courses" style="width: 100%">
    <el-table-column label="课程ID" prop="id" />
    <el-table-column label="课程名称" prop="name" />
    <el-table-column label="学分" prop="time" />
    <el-table-column label="课时" prop="point" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="keyword" size="small" placeholder="搜索课程" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="editCourse(scope.row)">
          更新
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="deleteCourse(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination background layout="prev, pager, next" :total="total"
                 :page-size="pageSize" @current-change="loadCourse"/>
  <!-- 对话框 -->
  <el-dialog v-model="dialogFormVisible" title="课程信息" width="500" @close="course={}">
    <el-form :model="course">
      <el-form-item label="课程名称">
        <el-input v-model="course.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学分">
        <el-input v-model="course.time" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课时">
        <el-input v-model="course.point" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCourse">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "CourseView",
  data() {
    return {
      courses: [], // 课程集合
      keyword: '',
      current: 1, // 当前页
      pageSize: 10, // 页大小
      total: 0, // 总数
      dialogFormVisible: false,
      course: {}
    }
  },
  methods: {
    loadCourse(current) {
      this.current = current
      this.$axios.get('/api/courses/findCourse?current=' + this.current + "&pageSize=" + this.pageSize)
          .then(result => {
            console.log('course', result.data)
            if (result.data.code === 200) {
              this.courses = result.data.data.data;
              this.total = result.data.data.total;
            }
          })
    },
    // 编辑课程
    editCourse(course) {
      // 显示对话框
      this.dialogFormVisible = true;
      // 显示课程信息
      this.course = JSON.parse(JSON.stringify(course));
    },
    // 保存课程
    saveCourse() {
      if (this.course.id) {
        // 调用后台更新
        this.$axios.put('/api/courses/course', this.$qs.stringify(this.course))
            .then(result => {
              console.log('update', result.data)
              if (result.data.code === 200) {
                ElMessage.success('更新成功')
                // 更新课程列表
                this.loadCourse(this.current)
              }
            })
      } else {
        // 调用后台新增
        this.$axios.post('/api/courses/course', this.$qs.stringify(this.course))
            .then(result => {
              console.log('add', result.data)
              if (result.data.code === 200) {
                ElMessage.success('添加成功')
                // 更新课程列表
                this.loadCourse(this.current)
              }
            })
      }
      this.dialogFormVisible = false
    },
    // 删除课程
    deleteCourse(id) {
      ElMessageBox.confirm(
          '是否确定删除该课程？',
          '警告', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        // 调用后台的删除功能
        this.$axios.delete('/api/courses/course/' + id)
            .then(result => {
              if (result.data.code === 200) {
                ElMessage.success('删除成功')
                this.loadCourse(this.current)
              }
            })
      }).catch(() => {
        // 用户取消删除
      })
    }
  },
  mounted() {
    this.loadCourse(1)
  }
}
</script>

<style scoped>

</style>